<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="../css/mui.min.css">
    <!--App自定义的css-->
    <style type="text/css">
			.cameraImg {
				width: 65px;
				height: 65px;
			}

			.showImg {
				width: 200px;
				height: 260px;
			}

    </style>

</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">截屏</h1>
</header>
<div class="mui-content">
    <div class="mui-content-padded">
        <div onclick="pickPic()" style="text-align: center;">
            <img src="../images/carmer.png" class="cameraImg"/>
        </div>

        <div id="showPic">
        </div>
    </div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../bridge.js"></script>
<script src="../plugins/zepto.min.js"></script>
<script>
		mui.init({
			swipeBack: false
		});
		$(function(){
			Mplat.init(function(){
			//原生调用
			});
			});
		/**
		 * 从相册中选择照片
		 * @param {Object} params(参数) callback（回调函数，返回data ）
		 */

		function pickPic() {
		console.log("当前开始截屏");
				Mplat.screenShot({
					params: {},
					callback: function(data) {
						data = JSON.parse(data);
								console.log("当前开始截屏"+data);
						showImg(data.data.msg);
					}
				});

		}
		//显示照片
		function showImg(data) {
										console.log("当前开始截屏"+data);
			if(data!=null) {
                  var link = '';
					link +='<div style="text-align: center;margin: 1em;" >'
					      +'<img id="photo" class="showImg" src="'+data+'"/>'
					      +'</div>';
					      mui.toast(link);
					      $("#showPic").empty();
					      $("#showPic").append(link);

			} else {
				mui.toast("未获取到照片路径，请再试一次");
			}

		}

</script>

</html>